<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object.defineproperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let number = 18
        let person = {
            name: '张三',
            sex: '男',
            // age: 18

        }


        /**
         *  第一个参数：给哪个对象赋值
         *  第二个参数：添加的属性叫什么名
         *  第三个参数：添加的属性内容
         **/
        Object.defineProperty(person,'age',{
            // value: 18,
            // enumerable: true, // 控制属性是否可以枚举，默认值是false
            // writable: true, // 控制属性是否可以被修改，默认值是false
            // configurable: true, // 控制属性是否可以被删除，默认值是false(delete person.age)

            /**
             * 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
             *  如果把number属性放在person对象中，age: number，number变化时，person.age不会跟着变化
             *  定义在这里，每次都会指定getter重新获取number的值
             **/
            // get: function(){
            get(){
                console.log('有人读取age属性了');
                return number;
            },

            /**
             * 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
             **/
            set(value){
                console.log('有人修改了age属性，且值是：'+value)
                number = value
            }
        })
        
        /**
         * 所有的key以数组的形式打印出来
         * 1.直接在person中添加age属性，age这个key能打印出来
         * 2.在Object.defineProperty定义的属性，这里不能打印出对应的key
         * （enumerable没有设置为true的情况下，打印出来的key颜色是不一样的）
         **/
        console.log(Object.keys(person));

        /**
         * 打印person中所有key对应的value
         * 1.直接在person中添加age属性，age对应的值能打印出来
         * 2.在Object.defineProperty定义的属性，这里不能打印出key对应的值
         * （enumerable没有设置为true的情况下，打印出来的key颜色是不一样的）
         **/
        for(let key in person){
            console.log('@',person[key])
        }


        console.log(person);

    </script>
    
</body>
</html>